<template>
  <view class="message-detail-page">
    <view class="navbar">
      <view class="navbar-back" @click="navigateBack">
        <image src="/static/images/back-icon.png" mode="aspectFit"></image>
      </view>
      <view class="navbar-title">消息详情</view>
    </view>
    <view class="message-container">
      <view class="message-header">
        <text class="message-title">{{ message.title }}</text>
        <text class="message-time">{{ message.time }}</text>
      </view>
      <view class="message-content">
        <rich-text :nodes="message.content"></rich-text>
      </view>
    </view>
    <view class="bottom-action" v-if="message.canReply">
      <button class="reply-btn" @click="replyMessage">回复</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: {
        id: 1,
        title: '订单支付成功通知',
        time: '2025-05-28 10:30:00',
        content: '<p>尊敬的用户，您的订单 #202505281030 已支付成功，我们将尽快为您发货！</p><p>订单金额：¥1,299.00</p><p>支付方式：微信支付</p><p>感谢您的购买！</p>',
        canReply: false
      }
    }
  },
  onLoad(options) {
    this.messageId = options.id
    // 加载消息详情
  },
  methods: {
    navigateBack() {
      uni.navigateBack();
    },
    replyMessage() {
      uni.showToast({
        title: '回复功能开发中',
        icon: 'none'
      });
    }
  }
}
</script>

<style>
.message-detail-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.message-container {
  padding: 30rpx;
  background-color: #fff;
}

.message-header {
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 20rpx;
}

.message-title {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.message-time {
  font-size: 24rpx;
  color: #999;
}

.message-content {
  font-size: 28rpx;
  line-height: 1.8;
  color: #333;
}

.message-content p {
  margin-bottom: 20rpx;
}

.bottom-action {
  padding: 30rpx;
  text-align: center;
}

.reply-btn {
  width: 600rpx;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #ff4500;
  color: #fff;
  border-radius: 44rpx;
  font-size: 32rpx;
}
</style>    